<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #f7f7f7;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
        }

        select {
            border: none;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            background-color: #fff;
        }

        .showRentDetail {
            background: url("../../image/yellbgx.png") center no-repeat;
            height: 4.5rem;
            background-size: 100% 100%;
            width: 100%;
            box-sizing: border-box;
            display: -webkit-flex;
            position: relative;
        }

        .nowNumber {
            width: 100%;
            height: 1.2rem;
            display: flex;
            margin-left: calc((100% - 6.9rem) / 2);
            display: -webkit-flex;
            box-sizing: border-box;
            justify-content: space-between;
            align-items: center;
        }

        .nowNumber>span:first-of-type {
            flex: 1;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-items: center;
        }

        .showCoinDetail {
            width: 6.9rem;
            height: 3rem;
            position: absolute;
            background-color: #fff;
            border-radius: 0.1rem;
            z-index: 1;
            left: calc((100% - 6.9rem) / 2);
            top: 1.2rem;
            display: flex;
            display: -webkit-flex;
            box-sizing: border-box;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 0.05rem #f7f7f7;
        }

        .showCoinDetail ul {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
        }

        .showCoinKind {
            height: 0.76rem;
            margin-bottom: 0.5rem;
        }

        .showCoinKind li {
            width: 33%;
            height: 0.72rem;
            line-height: 0.72rem;
            text-align: center;
            border: 0.02rem solid #ffd203;
        }

        .showCoinKind li:first-of-type {
            background-color: #ffd203;
            border-radius: .05rem 0 0 .05rem;
        }

        .showCoinKind li:last-of-type {
            border-radius: 0 .05rem .05rem 0;
        }

        .showCoinKind li:nth-of-type(2) {
            border-left: 0;
            border-right: 0;
        }

        .showtotalPower {
            height: 0.8rem;
        }

        .showtotalPower li {
            color: #949494;
            width: 25%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-size: 0.26rem;
            border-right: 1px solid #dcdcdc;
        }

        .showtotalPower li:last-of-type {
            border-right: none;
        }

        .showtotalPower li span:last-of-type {
            color: #000420;
            font-size: 0.24rem;
        }

        .machineListChoose {
            margin-top: 0.2rem;
            width: 100%;
            height: 0.92rem;
            background-color: #fff;
            border-bottom: 1px solid #e2e2e2;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .showList {
            width: 100%;
            height: auto;
        }

        .showList ul {
            width: 100%;
            background: #f7f7f7;
        }

        .showList ul li {
            width: 100%;
            display: inline-block;
            background-color: #fff;
            height: auto;
            /* padding-left: 0.28rem; */
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            margin-bottom: 0.2rem;
            border-bottom: 1px solid #e2e2e2;
        }

        .showList ul li>p {
            margin-top: 0.2rem;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 0.44rem;
            box-sizing: border-box;
            padding-left: 0.28rem;
        }

        .showList ul li>b {
            width: 100%;
            height: 0.84rem;
            background: #f9f9f9;
            opacity: 0.91;
            padding: 0 0.28rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            font-weight: normal;
        }

        .showList ul li>b span {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .showList ul li>b button {
            outline: none;
            border: none;
            width: 1.6rem;
            height: 0.51rem;
            background: rgba(250, 250, 250, 1);
            border: 1px solid rgba(170, 170, 170, 1);
            opacity: 0.63;
            border-radius: 0.26rem;
            font-size: 0.21rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            color: #262626;
        }

        .showTransferNum {
            position: absolute;
            top: -40%;
            right: -1.1rem;
            padding: 0.02rem 0.1rem;
            background-color: #FD6B6B;
            border-radius: 0.2rem 0.2rem 0.2rem 0;
            color: #fff;
            font-size: 0.18rem;
        }

        .rentItemDetail {
            padding-right: 1rem;
            font-size: 0.24rem;
            height: 2.3rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 0.28rem;
            box-sizing: border-box;
        }

        .rentItemDetail div p {
            color: #b8b8b6;
        }

        .rentItemDetail div {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

        .rentItemDetail div p {
            margin: 0.1rem 0;
        }

        .rentItemDetail div p span span {
            color: #616161;
        }

        .expireDay {
            font-size: 0.2rem;
            padding: 0.02rem 0.12rem;
            background-color: #ffe3e6;
            color: #ff6678;
            border-radius: 0.05rem;
            margin-left: 0.1rem;
        }

        .fix {
            width: 100%;
            height: 0.92rem;
            background-color: #fff;
            border-bottom: 1px solid #e2e2e2;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-top: 0;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10;
        }

        .machineListChoose span::after {
            border-top: 0.1rem solid #e2e2e2;
            border-right: 0.1rem solid transparent;
            border-left: 0.1rem solid transparent;
            content: "";
            position: absolute;
            width: 0;
            right: 8%;
            top: 40%;
        }
    </style>
    <title>关联算力包列表</title>
</head>

<body>
    <div class="showList">
        <ul id="outcoinlist" style="padding-top: 0.2rem;">
        </ul>
        <div id="listState" style="padding: 0.2rem 0;width:100%;text-align: center;">
            加载中……
        </div>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/dotmin.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var account = app.getAccount();
            var total_page = 0;
            var currentPage = 1;
            var refour = /([0-9]+\.[0-9]{8})[0-9]*/;
            var insurance_id = api.pageParam.insurance_id;
            var powerUnit = "T" //单位
            var drawPage = function (targetArr) {
                var temp = doT.template($("#md").text());
                $("#box").html(temp(targetArr));
            };
            //已关联合约包列表
            function loadPage(page, isdown) {
                app.ajaxPro({
                    url: "insurance/get-relate-order",
                    values: {
                        token: account.token,
                        insurance_id: insurance_id,
                        page: page,
                        pageSize: 10
                    },
                    openFlower: true
                }, function (ret) {
                    if (ret.code == 200) {
                        var addlist = ret.data.body.rented_list;
                        total_page = ret.data.total_page;
                        if (ret.data.body.regular_will_end == 1) {
                            $(".fixedText").show();
                        } else {
                            $(".fixedText").hide();
                        }
                        ret.data.body.rented_list.map(function (item) {
                            item.total_deposit = item.productDeposit
                            if (item.currency_name == "BTC") {
                                item.rentpowerUnit = "T";
                            } else {
                                item.rentpowerUnit = "M";
                            }
                            if (item.is_regular == 0) {
                                item.regularText = "活期";
                            } else {
                                item.regularText = "定期";
                            }
                            if (item.regular_end_date) {
                                //指定时间的时间戳(s)
                                var operTime = app.toSecond(item.regular_end_date);
                                //返回当前时间的时间戳(s)
                                var nowThisTime = app.getCurStamp();
                                var isShowEnd = operTime - nowThisTime;
                                if (item.is_regular != 0 && isShowEnd < 604800) {
                                    item.showEnd = true;
                                }
                                if (nowThisTime > operTime) {
                                    item.showEnd = false;
                                }
                            }
                            var showBhpcPay = item.total_deposit_coin ? (String(item.total_deposit_coin).split(".")[0] + "." + String(item.total_deposit_coin).split(".")[1].slice(0, 2)) : 0;
                            item.base_power = Number(item.base_power);
                            item.total_deposit = Number(item.total_deposit);
                            item.total_deposit_coin = showBhpcPay;
                            item.total_power = Number(item.base_power) * Number(item.num);
                            item.regular_power = Number(item.regular_power);
                            item.computing_power = Number(item.computing_power);
                            item.pe_power = Number(item.pe_power);
                            item.num = Number(item.num);
                            item.total_regular_power = app.accMul(
                                app.moreAccAdd(
                                    item.floatPower,
                                    item.futuresPower,
                                    item.regularPower,
                                    item.pePower
                                ),
                                item.num
                            );
                            item.total_power = app.accMul(
                                item.computing_power,
                                item.num
                            );
                            item.total_base_power = app.accMul(
                                item.base_power,
                                item.num
                            );
                            if (item.dragStatus == 1) {
                                item.textColor = "#42aa79"; //挖矿中
                            } else if (item.dragStatus == 0) {
                                item.textColor = "#f3933a"; //待挖
                            } else {
                                item.textColor = "#B8B8B6";
                            }
                        })
                        var temp = doT.template($("#ul_list").text());
                        if (isdown) {
                            $("#outcoinlist").html(temp(ret.data.body.rented_list));
                        } else {
                            $("#outcoinlist").append(temp(ret.data.body.rented_list));
                        }
                        if (currentPage == 1 && ret.data.body.rented_list.length == 0) {
                            $("#listState").text("暂时没有相关数据");
                        }
                        if (currentPage == total_page && total_page != 0) {
                            $("#listState").text("没有更多了");
                        }
                    }
                })
            };
            loadPage(currentPage, true);
            $("#outcoinlist").on("click", "li", function () {
                app.openWin({
                    name: "computing_details" + $(this).data("machineid"),
                    url: app.hd + "rent/computing_details.html",
                    pageParam: {
                        subpage: "rent/computing_details",
                        name: "computing_details" + $(this).data("machineid"),
                        title: "合约包详情",
                        id: $(this).data("machineid"),
                        status: $(this).data("machinestatus"),
                        isShow: $(this).data("show"),
                        isshowText: $(this).data("showtext"),
                        orderId: $(this).attr("data-orderId"),
                        textColor: $(this).attr("data-textColor"),
                        machineState: $(this).attr("data-dragStatus"),
                        cointype: "BTC",
                    }
                })
            })
            app.downRefresh(function () {
                $("#outcoinlist").empty();
                $("body").scrollTop(0);
                currentPage = 1;
                loadPage(currentPage, true);
            });
            app.toBottom(function () {
                if (currentPage < total_page) {
                    currentPage++;
                    loadPage(currentPage, false);
                }
            });
        }
    </script>
    <script type="text/html" id="ul_list">
        {{~it:item:index}}
        <li data-checkVoucher="{{=item.id}}" data-machineid="{{=item.id}}" data-showtext="{{=item.showText}}" data-machinestatus="{{=item.dragStatus}}" data-show="{{=item.showEnd}}" data-orderId="{{=item.order_id}}" data-dragStatus="{{=item.dragStatus}}" data-textColor="{{=item.textColor}}">
            <p class="testNew">
                <span style="position: relative;">
                    <span style="display:flex;display:--webkit-flex;align-items:cneter;">
                        {{?item.is_bhp_pos==1}}
                        <img src="../../image/iconbsasx.png"  style="width: 0.67rem;height: 0.3rem;border-radius:0.08rem;">
                        {{??}}
                            {{?item.currency_name=="BTC"}}
                            <img src="../../image/iconasxx.png"  style="width: 0.3rem;height: 0.3rem;border-radius:0.08rem;">
                            {{??item.currency_name=="ETH"}}
                            <img src="../../image/iconcethx.png" style="width: 0.3rem;height: 0.3rem;border-radius:0.08rem;">
                            {{??}}
                            <img src="../../image/icondltcx.png" style="width: 0.3rem;height: 0.3rem;border-radius:0.08rem;">
                            {{?}}
                        {{?}}
                        <span style="display:inline-block;width:auto;line-height:0.35rem;margin-left:0.12rem;">
                            {{=item.product_name}}
                        </span>
                        <span class="showTransferNum" style="display:{{=Number(item.freeze_num)>0?'inline-block':'none'}};">
                            {{=item.freeze_num}}份转让中
                        </span>
                    </span>
                </span>
                <span class="showWorkStu" style="display:inline-block;width:1.5rem;text-align:right;color:{{=item.textColor}};font-size: 0.25rem;display:{{=(item.freeze_num==item.num && item.num !=0)?'none':'inline-block'}};">
                    {{=item.workText}}
                </span>
            </p>
            <b class="showsmallbox" style="width:100%;height: 0.6rem;display:flex;display:-webkit-flex;align-items:center;justify-content: flex-start;background-color: #fff;border-bottom: 1px solid #e2e2e2;">
                <span class="expireDay" style="display:{{=item.showEnd == true? 'inline-block' : 'none'}}">
                    即将到期
                </span>
                <span class="expireDay" style="background:rgba(239,246,255,1);color:#378CF4;">
                    {{=item.state2==2?"承接":"购买"}}
                </span>
                <!-- <span class="expireDay" style="background-color: #FFF0E3;color:#ED7718;display:{{=Number(item.freeze_num)>0?'inline-block':'none'}}">
                    转让中
                </span> -->
                {{?item.label ==0}}
                {{??item.label ==1}}
                <span class="expireDay" style="background-color: rgba(66,170,121,0.1);color:#42AA79;">
                    可转让
                </span>
                {{??item.label==2}}
                <span class="expireDay" style="background-color: #FFF4D8;color:#F08800;">
                    30天
                </span>
                {{??item.label==3}}
                <span class="expireDay" style="background-color: #FFF4D8;color:#F08800;">
                    90天
                </span>
                {{??item.label==4}}
                <span class="expireDay" style="background-color: #FFF4D8;color:#F08800;">
                    180天
                </span>
                {{??}}
                {{?}}
                <span class="expireDay" style="background-color: #FFF4D8;color:#F08800;">
                    服务合约
                </span>
            </b>
            <div class="rentItemDetail">
                <div>
                    <p>
                        <span>
                            总金额:
                            <span>
                                {{=item.total_deposit}}
                                {{?item.pay_currency=="BHPC"||item.pay_currency=="CNY"}}CNY{{?}}
                                {{?item.pay_currency=="BCNY"}}OTC余额{{?}}
                                {{?item.pay_currency=="USDT"}}USDT{{?}}
                            </span>
                        </span>
                    </p>
                    <p>
                        <span>
                            开挖时间:
                            <span>
                                {{=item.time_income}}
                            </span>
                        </span>
                    </p>
                    <p style="display:{{=item.regular_date_num>30? 'inline-block' : 'none'}}">
                        <span>
                            锁定时间:
                            <span>
                                {{=item.endTime==null? "":item.endTime}}
                            </span>
                        </span>
                    </p>
                    {{?item.dragStatus ==0}}
    
                    {{??item.dragStatus ==1}}
    
                    {{??}}
                    <p>
                        <span>
                            退单时间:
                            <span>
                                {{=item.returnEndDate}}
                            </span>
                        </span>
                    </p>
                    {{?}}
                </div>
                <div>
                    <p>
                        <span>
                            总算力:
                            <span>
                                {{=item.total_power}}{{=item.rentpowerUnit}}
                            </span>
                        </span>
                    </p>
                    <p>
                        <span>
                            基础算力:
                            <span>
                                {{=item.total_base_power}}{{=item.rentpowerUnit}}
                            </span>
                        </span>
                    </p>
                    <p>
                        <span>
                            奖励算力:
                            <span>
                                {{=item.total_regular_power}}{{=item.rentpowerUnit}}
                            </span>
                        </span>
                    </p>
                </div>
            </div>
            <!-- <b>
                <span>
                    <img src="../../image/dindanhao.png" style="width: 0.31rem;height: 0.31rem;">
                    <span style="font-size: 0.24rem;margin-left: 0.16rem;">
                        订单号:{{=item.order_id}}
                    </span>
                </span>
                <button class="contractText" data-orderId={{=item.order_id}}>
                    查看合同
                </button>
            </b> -->
        </li>
        {{~}}
    </script>
</body>

</html>